<template>
    <div class="ep-sel" v-show="show">
        <div class="ep-form-title">
            <p>{{ title }}</p>
        </div>
        <div class="ep-cells">
            <div v-for="(item,index) in data" :key="index" :class="['ep-cell','ep-border-bottom',item.code == initData ? 'on' :'' ]" @click="confirm(item)">
                <label class="ep-label">{{ item.name }}</label>
            </div>
        </div>
    </div>
</template>

<script>
var mask = document.createElement('div');
export default {
    name: 'SelectAll',
    props: {
        selId: {
            type: String,
            default: '1',
        },
        title: {
            type: String,
            default: '请选择',
        },
        data: {
            type: Array,
            default: []
        },
        show: {
            type: Boolean,
            default: false
        },
        initData:{
            type: [String,Number],
            default: '',
        }
    },
    data() {
        return {
            value: '',
            resultShow: this.show,
            province:{
                name:'',
                id:''
            }
        }
    },
    methods: {
        confirm(val) {
            document.body.style.overflow = '';
            val.selId = this.selId;
            this.$emit('change', val);
        }
    },
    mounted() {
        this.show ? document.body.style.overflow = 'hidden': '';
        
    },
}
</script>

<style lang="less" scoped>
.ep-sel {
    background: #f5f5f9;
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 100;
    .ep-cells {
        height: calc(100vh - 36px);
        overflow-y:auto;
        .on {
            background:url("../assets/select_on_blue.png") 96% center no-repeat;
            background-size:.18rem auto;
            .ep-label{
                color:#0485E0;
            }
        }
    }
}
</style>
